@font-face {
  font-family: 'tuniao-xiaowei';
  src: url('https://resource.tuniaokj.com/images/vue3-template/template2-website/font/tuniao-xiaowei.ttf');
}

/* 顶部导航栏区域 start */
.navbar {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0rpx 30rpx;
  display: flex;
  align-items: center;

  .box {
    flex: 1;
    height: 64rpx;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rpx 30rpx;
    line-height: 1;
    color: rgba(0, 0, 0, 0);

    &__tips {
      font-size: 30rpx;
      margin-left: 16rpx;
    }
  }

  /* logo */
  &__logo {
    flex-grow: 0;
    flex-shrink: 0;
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background-color: var(--tn-color-gray-light);

    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
  }

}

/* 页面内容 start */
.page {
  position: relative;
  width: 100%;

  /* 顶部背景 start */
  .top-bg {
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    width: 100%;
    height: 470rpx;
    background-size: 100% auto;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0) 100%);
      z-index: 1;
    }
  }
  /* 顶部背景 end */

  .top_icon {
    position: absolute;
    left: 0;
    top: 130rpx;
    padding: 0rpx 30rpx;
    z-index: 2;

    .icon {
      display: inline-block;
      margin-right: 20rpx;
    }
  }

  /* 用户信息 start */
  .user-info {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60rpx;
    border-radius: 20rpx;
    padding: 0rpx 30rpx;

    .info-content {
      display: flex;
      align-items: center;

      .avatar {
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;

        &::before {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          width: 105%;
          height: 105%;
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
        }
      }

      .content {
        margin-left: 40rpx;
        color: #fff;

        .nickname {
          font-size: 38rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
          display: flex;
          align-items: center;
        }
        .user-level-img {
          width: 30px;
          height: 14px;
          margin-left: 6px;
        }

        .uid {
          display: flex;
          align-items: center;

          .text {
            margin-top: 14rpx;
            font-size: 26rpx;
            //   color: var(--tn-color-gray);
          }

          .copy {
            color: var(--tn-color-grey);
            margin-left: 10rpx;
          }
        }
      }
    }

    .setting-icon {
      color: var(--tn-color-gray);
      font-size: 50rpx;
    }
  }

  /* 用户信息 end */

  .other-user-info {
    border-radius: 20rpx 20rpx 0 0;
    width: 100%;
    position: relative;
    margin-top: 60rpx;
    background-color: #fff;
    padding-bottom: 30rpx;

    /* 点赞、粉丝、关注、圈子数量 start */
    .statistics-container {
      display: flex;
      align-items: center;
      padding: 40rpx 30rpx 30rpx 0;

      .statistics-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .total {
          font-size: 34rpx;
          font-weight: bold;
        }

        .title {
          margin-top: 12rpx;
          font-size: 28rpx;
          color: #5f7e8b;
        }

        .edit-info {
          flex-grow: 0;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 60rpx;
        }
      }
    }

    /* 点赞、粉丝、关注、圈子数量 end */

    .user-tags {
      padding: 0rpx 30rpx;
    }

    .motto {
      padding: 0rpx 30rpx;
      color: #838383;
    }
  }


  /* 列表 start */
  .list {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 30rpx 0;

    .mine-photos {
      padding: 0 30rpx;
    }
  }

  /* 列表 end */
}

/* 会员权益 start */
.button-vip {
  width: 100%;
  height: 130rpx;
  border-radius: 20rpx;
  position: relative;
  z-index: 1;
  background: linear-gradient(120deg, #151515, #15041c, #2d2d2d, #363636);

  &::after {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: url(https://resource.tuniaokj.com/images/oa/vip-bg3.png);
  }
}

/* 会员权益 end */

.menu-container {
  display: flex;
  flex-direction: column;
  /* 设置为列方向 */
  height: 100vh;
}

.menu-content {
  flex: 1;
}

.menu-footer {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  justify-content: center;
  line-height: 1;
  left: 0;
  margin-bottom: 30rpx;
  /* #ifdef MP-WEIXIN */
  bottom: 100rpx;
  /* #endif */

  /* #ifdef H5 || APP-PLUS */
  bottom: 70rpx;
  /* #endif */
  

  .footer-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: 60rpx;
    }

    .title {
      margin-top: 12rpx;
      font-size: 24rpx;
      color: #9c9c9c;
      transform: scale(0.9);
      transform-origin: center center;
    }
  }
}
.footer-copyright {
  
}

/* 页面内容 end */

@keyframes waveAnimation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(-50%);
  }
}